<template>

	<el-container class="article-detail" style="height: 100%;">
  		<el-header class="header" height="100px;">
  			<div class="header-top">
	  			<div class="header-left">上海 晴 2° / 15°</div>
	  			<div class="header-right">鼎牛产品</div>
	  		</div>
	  		<div class="header-bottom">
	  			
	  			
  				<a class="logo-wrap" href="">
    				<img class="logo" :src="logo">
    			</a>
	  			
	  			
	  			<div class="header-bottom-main">
	  				<el-row :gutter="30">
					  	<el-col :span="18">
					  		<!-- 面包屑导航条 -->
					  		
					  		<el-breadcrumb v-if="detailLevel.length>0" class="app-breadcrumb" separator="/">
							    <transition-group name="breadcrumb">
							      <el-breadcrumb-item v-for="(item,index) in detailLevel" :key="index">
							        <span v-if="!item.url" class="no-redirect">{{ item.name }}</span>
							        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
							      </el-breadcrumb-item>
							    </transition-group>
							  </el-breadcrumb>
					  	</el-col>
					  	<el-col :span="6"></el-col>
					</el-row>
	  			</div>


	  		</div>	
  		</el-header>
  		<el-container class="article-container">
  			<!-- 文章标签 -->
    		<el-aside class="nav-wrap" width="150px">
    			
    		</el-aside>
    		<el-main class="main-content-wrap">

    			<el-row class="main-content" :gutter="30">
    				<!-- 正文列表 -->
				  	<el-col v-if="articleDetail !== null" class="article-detail" :span="18">
				  		<h1 class="article-title">{{ articleDetail.title }}</h1>
						
						<div class="article-sub">
							<span>{{articleDetail.userName}}</span>
							<span>{{ articleDetail.updateTime ? articleDetail.updateTime : articleDetail.createTime }}</span>
							<span class="sub-operate">
								<!-- <span class="sub-operate-item">
									<img :src="zhuanfa">
									转发
								</span> -->
								<span class="sub-operate-item" @click="shareWeibo">
									<img :src="weibo">
									微博
								</span>
								<span class="sub-operate-item" @click="shareQzone">
									<img :src="qzone">
									Qzone
								</span>

								<el-popover
								    placement="bottom"
								    width="100"
								    trigger="hover"
								    @show="shareWechat"
								>
							    	<div class="wechatQrcode" ref="wechatQrcode"></div>
									<span slot="reference" class="sub-operate-item">
										<img :src="wechat">
										微信
									</span>

								</el-popover>	

							</span>
						</div>

						<div class="article-content" v-html="articleDetail.content">
							
						</div>

						<comment-content
							:articleId.sync="articleId"
						></comment-content>
				  	</el-col>

				  	<!-- 广告 -->
				  	<el-col :span="6">
				  		
				  	</el-col>
				</el-row>

			</el-main>

  		</el-container>
	</el-container>

</template>

<script>
	import QRCode from 'qrcodejs2'
	import { mapGetters } from "vuex";
	import { cateList } from "@/api/content/list"
	import { articleDetail } from "@/api/content/detail"
	import { deepClone } from "@/utils/util"
	import { isMobileDevice } from "@/utils/validate"
	import { baseUrl } from '@/config/env';
	import CommentContent from '@/components/comment/commentContent'

	//获取图片的url
	const imgPrefix = baseUrl+'/rest/common/preview/';

	export default{
		data(){
			return{
				//分享图片
				zhuanfa:require("@/assets/dingNiu/detail/zhuanfa.png"),
				weibo:require("@/assets/dingNiu/detail/weibo.png"),
				qzone:require("@/assets/dingNiu/detail/qzone.png"),
				wechat:require("@/assets/dingNiu/detail/wechat.png"),
				//服务器图片前缀
            	imgPrefix:imgPrefix,
            	defaultImg:require("@/assets/dingNiu/default.jpg"),
				logo:require("@/assets/logo.png"),
				catagoryList:[],
				articleDetail:null,
				articleId:'',
				wechatQRCode:null,
			}
		},
		components:{
			CommentContent
		},
		computed: {
			...mapGetters([
					"detailLevel",
				])
		},
		mounted(){

			if(isMobileDevice()){
				//获取当前路由信息
				console.log("%c文章详情路由信息：","background:#f06;color:#fff")
				console.log(this.$route)
				var params = this.$route.params;
				var query = this.$route.query;
				this.$router.replace({
					name:'pDetail',
					params:params,
					query:query
				})
			}

			this.$store.dispatch('setLevel',{level:2,data:{name:'正文'}})

			this.getDetail();
		},
		methods:{

			getDetail(){
				var articleId = this.$route.params.articleId;
				this.articleId = articleId;
				articleDetail(articleId).then((res)=>{
					console.log("------正文详情------")
					console.log(res)
					this.articleDetail = res.data.data;
				})
			},
			//点击文章分类导航
			cataNavClick(index,item,list){
				if(item.active == true){
					return;
				}

				for(var i=0;i<list.length;i++){
					list[i].active = false;
				}

				item.active = true;
				this.curCategoryId = item.id;
				this.$router.replace({
					path:'/content/index',
					query:{
						cateId:this.curCategoryId
					}
				})
			},
			handleLink(item) {
		      const { url } = item
		      
		      this.$router.push({
		      	path:url
		      })
		    },
		    //分享到qq空间
		    shareQzone(){
		    	//console.log(this.$route)
		    	var url = window.location.href;
		    	var desc = '这篇文章不错，分享一下~~';
		    	var title = this.articleDetail.title;
		    	var site = "鼎牛内容";
		    	var params = {
		    		sharesource:'qzone',
		    		url:url,
		    		desc:desc,
		    		title:title,
		    		site:site,
		    	}
		    	var s = [];
	            for (var i in params) {
	                s.push(i + '=' + encodeURIComponent(params[i] || ''));
	            }
        		var target_url =
                "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?"+s.join('&');

        		window.open(target_url,'','width=200,height100');
		    },
		    //分享到微博
		    shareWeibo(){
		    	var url = window.location.href;
		    	var title = this.articleDetail.title;
		    	var content = 'utf-8';
		    	var appkey = "3852007749";

		    	var params = {
		    		url:url,
		    		title:title,
		    		content:content,
		    		appkey:appkey
		    	}
		    	var s = [];
	            for (var i in params) {
	                s.push(i + '=' + encodeURIComponent(params[i] || ''));
	            }
        		var target_url =
                "http://v.t.sina.com.cn/share/share.php?"+s.join('&');

        		window.open(target_url,'newwindow','width=200,height100');

		    },
			//分享到微信
			shareWechat(){
				if(this.wechatQRCode === null){
					var _this = this;
					var url = window.location.href;
					this.$nextTick(() => {
						var qrcode = new QRCode(this.$refs.wechatQrcode,{
							text:url,
							width:100,
							height:100,
							colorDark:'#000000',
							colorLight:'#ffffff',
							correctLevel:QRCode.CorrectLevel.H
						})

						this.wechatQRCode = qrcode;
					})
				}	
			}
			
		}
	}

</script>


<style>
	/*修改登陆tab样式*/
	.login-reg-tabs .el-tabs__nav{
		width: 100%;
		display: flex;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item{
		flex: 1;
		padding: 0;
		text-align: center;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item.is-active,.login-reg-tabs .el-tabs__nav .el-tabs__item:hover{
		color: #FF8100;
	}

	.login-reg-tabs .el-tabs__active-bar{
		background-color: #FF8100;
	}

	.article-detail .el-header{
		padding: 0;
		box-shadow: 0 4px 4px rgba(200,200,200,.2);
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}

	/*文章正文内容*/
	.article-content p{
		line-height: 30px;
	}

	.article-content .ql-align-center{
		text-align: center;
	}

	.article-content p img{
		max-width: 100%;
	}
</style>


<style scoped>
	.header-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.header-bottom{
		padding: 0 20px;
		line-height: 50px;
		background: #ffffff;
		position: relative;
	}

	.header-bottom>.logo-wrap{
		width: 150px;
		padding:0 20px;
		float: left;
		vertical-align: middle;
		line-height: 0;
	}

	

	.header-bottom-main{
		margin-left: 150px;
	}


	.app-breadcrumb{
		line-height: 50px;
	}

	.article-container{
		margin-top: 100px;
		height: 100%;
		overflow: auto;
	}

	.nav-wrap{
		padding: 20px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}

	.nav{
		list-style: none;
		width: 100%;
		padding: 0;
		margin-top: 0;
		text-align: center;
	}

	.nav .nav-item{
		width: 100%;
		border-radius: 4px;
		padding: 5px 0;
		background-color: #FFFFFF;
		color: #444;
		font-size: 16px;

	}

	.nav .nav-item.current{
		background-color: #FF8100;
		color: #ffffff;
	}

	.nav .nav-item:hover {
	    animation-name: hvr-back-pulse;
	    animation-duration: .2s;
	    animation-timing-function: linear;
	    animation-iteration-count: 1;
	    background-color: #FF8100;
	    color: #fff;
	}

	@keyframes hvr-back-pulse{
		0%{
			background-color:rgba(255,129,0,.6)
		}
		50%{
			background-color:rgba(255,129,0,.76)
		}	
	}

	/*文章详情*/
	.article-title {
    	font-size: 34px;
    	font-weight: 700;
    	line-height: 44px;
    	color: #222;
	}

	.article-sub{
		margin-top: 12px;
	    margin-bottom: 20px;
	    font-size: 13px;
	}

	.article-sub>span {
	    color: #777;
	    margin-right: 8px;
	    vertical-align: middle;
	}
	.sub-operate-item{
		cursor: pointer;
		margin-right: 5px!important;
	}
	.sub-operate-item>img{
		width: 20px;
		height: 20px;
		vertical-align: bottom;
	}

	.wechatQrcode {
	    width: 100px;
	    margin: auto;
	}
</style>

